<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <title>
         Flying Saucer: 2 Column Layout with Menu
      </title>
<style type="text/css" media="screen">
	html { 
	padding:0px;
	margin:0px;
	}
	body {
	background-color: #e1ddd9;
	padding: 0px 20px;
	margin: 0px;
	}
	p, pre, h2 {
	padding: 10px;
	margin: 0px
	}
	h1 {
	text-align: right;
	background-color: #90897a;
	padding: 5px 15px;
	margin: 0px
	}
	h2 {
	padding-top: 10px;
	background-color: transparent;
	} 
	#menu {
	position: absolute;
	width: 200px;
	left: 20px;
	background-color: #ff99CC;
	padding: 0px;
	margin: 0px
	}
	#content {
	margin-left: 200px;
	background-color: #fff;
	overflow: auto;
	}
	p.right-align {
		text-align: right;
		}
	</style>
   </head>
   <body>
      <p class="right-align">
          logo image goes here
      </p>
      <h1>
         website byline, or maybe a nav menu bar
      </h1>
      <div id="menu">
         <h2>
            MENU
         </h2>
         <p>
            Menu content<br />
             Item 1<br />
             Item 2<br />
             Item 3<br />
             Item 4<br />
             Item 5<br />
         </p>
      </div>
      <div id="content">
         <h2>
            Content
         </h2>
         <p>
            Content laid out using XHTML 1.0 und CSS2/ Tableless
         </p>
         <p>
            Description of the layout...
         </p>
      </div>
   </body>
</html>

